<!--手工撤案-->
<template>
    <Card style="height:800px">
        <Card>
            <Form :model="conditionData" :label-width="60" inline>
                <FormItem label="委外日期">
                    <DatePicker v-model="conditionData.startDate" :options="startTimeOptions" @on-change="startTimeChange" type="date" style="width: 150px" name="startDate"></DatePicker>
                </FormItem>
                <FormItem label="至">
                    <DatePicker v-model="conditionData.endDate" :options="endTimeOptions" @on-change="endTimeChange" type="date" style="width: 150px" name="endDate"></DatePicker>
                </FormItem>
                <FormItem label="委外公司">
                    <Input placeholder="请输入" v-model="conditionData.company"></Input>
                </FormItem>
                <FormItem label="产品名称">
                    <Select v-model="conditionData.productType" class="v-select-wrapper" style="width:150px" name="productTypeName">
                        <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="客户姓名">
                    <Input placeholder="请输入" v-model="conditionData.customerName"></Input>
                </FormItem>
                <FormItem label="证件号码">
                    <Input placeholder="请输入" v-model="conditionData.idCardNo"></Input>
                </FormItem>
                <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
                <Button type="primary" @click="resetForm" style="margin-left: 20px;">重置</Button>
            </Form>
        </Card>
        <Card>
            <div>
                <Table border :columns="tableColumns" :data="tableData" style="width: 100%;"></Table>
            </div>
            <div style="text-align: center;margin-top: 36px;">
                <Page :total="total" :current="pageNo" :page-size="pageSize" size="small" show-elevator show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
        <Modal v-model="inputModel" @on-ok="ok" title="撤案原因">
            <Form ref="inputModelFrm" :model="inputModelFrm" :rules="inputValid" :label-width="90" inline>
                <div>确认将该笔业务撤出委案队列？</div>
                <br>
                <FormItem label="撤案原因：" prop="cancelReason">
                    <Input placeholder="请输入" v-model="inputModelFrm.cancelReason" type="textarea" :autosize="{minRows:2,maxRows:5}" style="width:300px;"></Input>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>
<script>
export default {
  data () {
    return {
      conditionData: {
        startDate: '',
        endDate: '',
        company: '',
        productName: '',
        customerName: '',
        idCardNo: ''
      },
      startTimeOptions: {},
      endTimeOptions: {},
      submitRowData: {},
      tableColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '姓名',
          key: 'customerName',
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'idCardNo',
          align: 'center'
        },
        {
          title: '手机号码',
          key: 'mobileNo',
          align: 'center'
        },
        {
          title: '产品名称',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '委外公司',
          key: 'company',
          align: 'center'
        },
        {
          title: '委外总额',
          key: 'outsideAmt',
          align: 'center'
        },
        {
          title: '委外日期',
          key: 'outsideDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.outsideDate))
            ])
          }
        },
        {
          title: '逾期天数',
          key: 'overdueDays',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, param) => {
            const vm = this
            return h('div', {}, [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px'
                },
                on: {
                  click: () => {
                    vm.inputModelFrm.cancelReason = ''
                    vm.inputModel = true
                    vm.submitRowData = param.row
                  }
                }
              }, '手动撤案')
            ])
          }
        }
      ],
      tableData: [],
      productList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      $ajax: null,
      inputModel: false,
      inputModelFrm: {
        cancelReason: ''
      },
      inputValid: {
        cancelReason: [
          { required: true, message: '撤案原因不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    listQuery (pageNo, pageSize) {
      var vm = this
      if (isNaN(pageNo)) {
        vm.conditionData.pageNo = 1
      } else {
        vm.conditionData.pageNo = pageNo || 1
      }

      pageSize = pageSize || 10
      // 列表查询
      vm.conditionData.pageSize = pageSize
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/selectCancelByHand', vm.conditionData).then(re => {
        var data = re.data
        var code = data.code
        if (code === 'success') {
          vm.tableData = data.data.list || []
          vm.total = data.data.total
          vm.pageNo = data.data.pageNo
        };
      }).catch(er => {

      })
    },
    // 查询条件重置
    resetForm () {
      this.conditionData.startDate = ''
      this.conditionData.endDate = ''
      this.conditionData.company = ''
      this.conditionData.productName = ''
      this.conditionData.customerName = ''
      this.conditionData.idCardNo = ''
    },
    pageChange (pageNo) {
      this.listQuery(pageNo, this.pageSize)
    },
    sizeChange (pageSize) {
      this.listQuery(this.pageNo, pageSize)
    },
    renderProductList: function () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/checkListQuery/service/findConditionList').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        if (data.data.productList && data.data.productList.length > 0) {
          data.data.productList.forEach(element => {
            vm.productList.push({
              label: element.productTypeName,
              value: element.productType
            })
          })
        }
      }).catch(er => {

      })
    },
    ok () {
      this.$refs.inputModelFrm.validate(valid => {
        if (valid) {
          var vm = this
          if (vm.inputModelFrm.cancelReason.length > 256) {
            this.$Message.warning('退回原因输入过长，不能提交！')
            return
          }
          // 提交
          vm.submitRowData.remark = vm.inputModelFrm.cancelReason
          this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/submit', vm.submitRowData).then(re => {
            var data = re.data
            var code = data.code
            var message = data.message
            if (code !== 'success') {
              this.$Message.warning(message)
            } else {
              this.$Message.success(message)
            }
            this.listQuery()
          }).catch(er => {

          })
        }
      })
    },
    startTimeChange: function (e) { // 设置开始时间
      this.conditionData.startDate = e
      this.endTimeOptions = {
        disabledDate: date => {
          let startTime = this.conditionData.startDate ? new Date(this.conditionData.startDate).valueOf() : ''
          return date && (date.valueOf() < startTime)
        }
      }
    },
    endTimeChange: function (e) { // 设置结束时间
      this.conditionData.endDate = e
      let endTime = this.conditionData.endDate ? new Date(this.conditionData.endDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
      this.startTimeOptions = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.renderProductList()
    this.listQuery()
  }
}
</script>
